export const detail = {
  header: `
# Input

> 此组件为div包裹input组件，封装了很多方法，可以设置多种例如名称，类型校验；有丰富的动画与用户进行交互。
`,
  codeExample: [
    {
      title: '### 姓名',
      code: `
import React from 'react';
import { Input } from 'ararin-cmp-mobile'

class App extends React.Component<any, any> {

      constructor(props) {
         super(props)

         this.state = {
            
         }
      }
      // componentDidMount....
      
      render() {
         return (
            <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <Input 
                     judge="name"
                     title="姓名："
                     placeholder="请输入您的姓名"
               />
            </div>
         );
      }
}

export default App;`
    }, {
      title: '### 6位数密码',
      code: `
import React from 'react';
import { Input } from 'ararin-cmp-mobile'

class App extends React.Component<any, any> {

      // constructor...
      // componentDidMount....
      
      render() {
         return (
            <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <Input 
                  judge="pwd"
                  title="密码："
                  placeholder="请输入6位数字密码"
               />,
            </div>
         );
      }
}

export default App;`
    }, {
      title: '### 手机',
      code: `
import React from 'react';
import { Input } from 'ararin-cmp-mobile'

class App extends React.Component<any, any> {

      // constructor...
      // componentDidMount....
      
      render() {
         return (
            <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <Input 
                  judge="mobilePhone"
                  title="手机："
                  placeholder="请输入11位手机号码"
               />,
            </div>
         );
      }
}

export default App;`
    }, {
      title: '### 身份证',
      code: `
import React from 'react';
import { Input } from 'ararin-cmp-mobile'

class App extends React.Component<any, any> {

      // constructor...
      // componentDidMount....
      
      render() {
         return (
            <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <Input 
                  judge="allIdCard"
                  title="身份证："
                  placeholder="请输入15位或18位身份证"
               />,
            </div>
         );
      }
}

export default App;`
    }, {
      title: '### 验证码',
      code: `
import React from 'react';
import { Input } from 'ararin-cmp-mobile'

class App extends React.Component<any, any> {

      constructor(props) {
         super(props)

         this.state = {
            times: 0,
            codeText: '点击获取'
         }
      }

      // componentDidMount....

      handleClickCode = () => {
         console.log(1111)
         Notify.loading('发送中', 0)
         let times = 60
         const timer = setInterval(() => {
             this.setState({times})
             if(times == 0) {
                 clearInterval(timer)
                 return 
             }
             if(times == 57) {
                 Notify.animateSuccess('发送成功', 3)
             }
             times--
 
         }, 1000)
     }
      
      render() {
         return (
            <div className="phone_button" style={{padding: '15vw 5vw 10vw', background: '#fff'}}>
               <Input 
                  judge="code"
                  title="验证码："
                  placeholder="请输入4位数验证码"
                  codeTxt={this.state.codeText}
                  times={this.state.times}
                  onClick={this.handleClickCode}
               />
            </div>
         );
      }
}

export default App;`
    },
  ],
  pramsDetail: `

  ----

  ### 参数设置
  
  | 参数 / params | 描述 / description  | 类型 / type | 默认 / default |
  | ------------- | -------------- | ---------------- | ---------------- |
  | title | input左边的描述 | \`string\` | 无 |
  | className | class类名，与React一致 | \`string\` | 无 |
  | type | Input的显示状态，block时为只读，input时可以输入，可选\`input\` 或 \`block\` | \`string\` | \`input\` |
  | judge | 检验方式，可选 | \`mobilePhone\`丨\`adsl\`丨\`telphone\`丨\`pwd\`丨\`allIdCard\`丨\`name\`丨\`code\`丨\`idCard\` | \`default\` |
  | noHide | judge为\`code\`时，不显示按钮 | \`boolean\` | \`fale\` |
  | times | judge为\`code\`时，传入的times | \`number\` | \`无\` |
  | codeTxt | judge为\`code\`时，times大于0时，显示的文字 | \`string\` | \`无\` |
  | RegExp | 自定义校检规则，正则个税，使用时只需传入校检内容如/\abc/\（x）,abc（√） | \`string\` | \`无\` |
  | noJudge | 不进行校验 | \`boolean\` | \`false\` |

  ### 暴露方法
  
  | 参数 / params | 描述 / description  | 接收参数 / params | 返回值 / return |
  | ------------- | -------------- | ---------------- | ---------------- |
  | setJudgeState | 设置当前参数校校检状态，使用时请使用 import { JUDE_STATE } from 'ararin-cmp-mobile/lib/util/state', 包涵三种状态，JUDE_STATE.SUCCESS，JUDE_STATE.FAILED，JUDE_STATE.STATIC; | \`string\` | 无 |
  `
  
}